<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="小区名称">
          <el-input
            v-model="queryParams.neighborhood"
            placeholder="小区名称"
            maxlength="50"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="采买金额">
          <el-input-number
            v-model="queryParams.amountMin"
            :min="0"
            :max="1000000000"
            :step="1"
            step-strictly
            controls-position="right"
          />
          -
          <el-input-number
            v-model="queryParams.amountMax"
            :min="0"
            :max="10000000000"
            :step="1"
            step-strictly
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="支付积分">
          <el-input-number
            v-model="queryParams.payPointsMin"
            :min="0"
            :max="10000000000"
            :step="1"
            step-strictly
            controls-position="right"
          />
          -
          <el-input-number
            v-model="queryParams.payPointsMax"
            :min="0"
            :max="10000000000"
            :step="1"
            step-strictly
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="成交时间">
          <el-date-picker
            v-model="tempTime"
            :editable="false"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="flex flex-col h-full" body-style="height: calc(100% - 100px);">
      <BasePageTable
        class="h-full"
        :tableColumnsData="columns"
        :pageSize="queryParams.pageSize"
        :tableData="pageData"
        :total="total"
        :loading="loading"
        @handleQuery="changePage"
      >
        <template #operation="{ row }">
          <el-button link type="primary" @click="lookDetail(row)">查看详情</el-button>
        </template>
      </BasePageTable>
    </el-card>
    <recordForm ref="recordForms" @nextBut="clickFormData" />
  </div>
</template>

<script setup lang="ts">
import recordForm from "./components/index-form.vue";
import recordsApi from "@/api/transactionRecords/index";

const queryParams = ref({
  neighborhood: "",
  amountMin: undefined,
  amountMax: undefined,
  payPointsMin: undefined,
  payPointsMax: undefined,
  startTime: "",
  endTime: "",
  pageSize: 10,
  pageNum: 1,
});
const pageData = ref([]);
const total = ref(0);
const tempTime = ref();
const loading = ref(false);
const recordForms = ref();
const detailInfo = ref();
const columns = ref([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "地址",
    prop: "region",
    align: "center",
  },
  {
    label: "小区名称",
    prop: "neighborhood",
    align: "center",
  },

  {
    label: "业主姓名",
    prop: "ownName",
    align: "center",
  },
  {
    label: "联系电话",
    prop: "mobile",
    align: "center",
  },
  {
    label: "品类",
    prop: "categoryTypeName",
    align: "center",
  },
  {
    label: "商品数量",
    prop: "productCount",
    align: "center",
  },
  {
    label: "采买时间",
    prop: "purchaseTypeName",
    align: "center",
  },
  {
    label: "采买金额（元）",
    prop: "amount",
    align: "center",
  },
  {
    label: "对接人",
    prop: "chatUserName",
    align: "center",
  },
  {
    label: "支付积分",
    prop: "paymentPoints",
    align: "center",
  },
  {
    label: "成交时间",
    prop: "transactionTime",
    align: "center",
  },
  {
    label: "操作",
    align: "center",
    width: "120",
    fixed: "right",
    customSlot: "operation",
  },
]);

function handleChange(val: any) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.value.startTime = startTime || "";
    queryParams.value.endTime = endTime || "";
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
}

async function handleQuery() {
  try {
    loading.value = true;
    const res: any = await recordsApi.getList(queryParams.value);
    pageData.value = res.data;
    total.value = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}

function handleResetQuery() {
  queryParams.value.neighborhood = "";
  queryParams.value.startTime = "";
  queryParams.value.endTime = "";
  queryParams.value.pageSize = 10;
  queryParams.value.pageNum = 1;
  queryParams.value.amountMin = undefined;
  queryParams.value.amountMax = undefined;
  queryParams.value.payPointsMin = undefined;
  queryParams.value.payPointsMax = undefined;
  tempTime.value = [];
  handleQuery();
}

function changePage(val: any) {
  queryParams.value.pageNum = val.pageNum;
  queryParams.value.pageSize = val.pageSize;
  handleQuery();
}

function lookDetail(row: any) {
  detailInfo.value = row;
  recordForms.value.openModal(row);
}

function clickFormData(val: any) {
  let index = pageData.value.findIndex((item: any) => item.id === detailInfo.value.id);
  if (val === "next") {
    const length = pageData.value.length;
    if (length === 1) {
      return ElMessage.warning("已是本页最后一单数据");
    }
    if (index >= length) {
      return ElMessage.warning("已是本页最后一单数据");
    } else {
      index++;
    }
  } else {
    if (index === 0) {
      return ElMessage.warning("已是本页第一单数据");
    } else {
      index = index - 1;
    }
  }
  detailInfo.value = pageData.value[index];
  lookDetail(detailInfo.value);
}

onMounted(() => {
  handleQuery();
});
</script>
